{extend name="base" /}
{block name="body"}
<div class="layui-col-md12">
    <div class="layui-card">
      <div class="layui-card-body">
            <div class="layui-form">
                <div class="layui-form-item">
                    <form action="{:url('user/finance/analysis')}" class="layui-form" method="get">
                    <div class="layui-inline">
                        <label class="layui-form-label">时间范围</label>
                        <div class="layui-input-inline">
                            <input type="text" name="dateframe" class="layui-input" id="test16" value="{$dateframe}" placeholder="{$dateframe}" autocomplete="off">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select name="bxuser">
                                <option value="">请选择报销人</option>
                                {foreach name=":model('user')->where(['status'=>'1'])->select()" item="r"}
                                <option value="{$r.id}" {if condition="input('bxuser') and (input('bxuser') eq $r.id)"} selected="selected"{/if}>{$r.realname}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select name="department">
                                <option value="">请选择部门</option>
                                {foreach name=":model('hook')->where(['group'=>'1','status'=>'1'])->select()" item="r"}
                                <option value="{$r.id}" {if condition="input('department') and (input('department') eq $r.id)"} selected="selected"{/if}>{$r.name}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select name="category">
                                <option value="">请选择类目</option>
                                {foreach name=":model('hook')->where(['group'=>'2','status'=>'1'])->select()" item="r"}
                                <option value="{$r.id}" {if condition="input('category') and (input('category') eq $r.id)"} selected="selected"{/if}>{$r.name}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select name="type">
                                <option value="">请选择类型</option>
                                <option value="1" {if condition="input('type') and (input('type') eq 1)"} selected="selected"{/if}>收入</option>
                                <option value="2" {if condition="input('type') and (input('type') eq 2)"} selected="selected"{/if}>支出</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layui-btn-primary ajax-search"><i class="fa fa-search"></i> 查看数据</button>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
        <div class="layui-card-header">日期：{$dateframe}</div>
        <table class="layui-table layui-form" lay-filter="demo">
            <tbody>
                <tr>
                    <th>日期</th>
                    {foreach name="array" key="i" item="r"}
                    <th>{$r}日</th>
                    {/foreach}
                </tr>
                <tr>
                    <td>收入</td>
                    {foreach name="shouru" item="r"}
                    <td>￥{:number_format($r,2)}</td>
                    {/foreach}
                </tr>
                <tr>
                    <td>支出</td>
                    {foreach name="zhichu" item="r"}
                    <td>￥{:number_format($r,2)}</td>
                    {/foreach}
                </tr>
            </tbody>
            
        </table>
    </div>
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">{$dateframe}</div>
            <div class="layui-card-body">

                <div id="container" style="height: 600px;"></div>

            </div>
        </div>
    </div>
    
</div>
{/block}
{block name="js"}
<script src="/static/js/echarts.common.min.js"></script>  
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        title: {
            text: '{$dateframe}',
            left: 'center',
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'bar'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend : {
            show:'true',
            left:'right'
        },
        xAxis: {
            type: 'category',
            name: '日期',
            splitLine: {show: true},
            data: [
            <?php foreach ($array as $r) {?>
                '{$r}',
            <?php }?>]
        },
        yAxis: {
            type: 'value'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        series: [{
            name: '收入',
            data: [<?php foreach ($shouru as $r) {?>
                    {$r},
                    <?php }?>],
            type: 'bar',
            color: '#009688',
            label:{
                normal:{
                    show:true,
                    position:'top',
                    textStyle: {
                        color: '#009688',
                        fontSize: 18
                    }
                }
            }
        },{
            name: '支出',
            data: [<?php foreach ($zhichu as $r) {?>
                    {$r},
                    <?php }?>],
            type: 'bar',
            color: '#FF5722',
            label:{
                normal:{
                    show:true,
                    position:'top',
                    textStyle: {
                        color: '#FF5722',
                        fontSize: 18
                    }
                }
            }
        }]
    };
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
<script>
  laydate.render({
        elem: '#test16'
        ,range: '-'
  });
</script>
{/block}